<!DOCTYPE HTML>
<html>
	<head>
		<meta charset='utf-8' />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>简单的云</title>
		<style>
		body {
			background: #ccc;
		}

		#cloud {
			width: 350px;
			height: 120px;
			background-color: #f2f9fe;
			border-radius: 100px;
			position: relative;
			margin: 200px;
			/*渐变的背景色还是设置在background里面*/
			background:-webkit-linear-gradient(top,#f2f9fe,#d7f0FD);
		}

		#cloud:after,#cloud:before {
			content: '';
			position: absolute;
			background:#f2f9fe;
			z-index: -1;
		}

		#cloud:after {
			width:100px;
			height:100px;
			border-radius: 110px;
			top:-40px;
			left:40px;
		}

		#cloud:before {
			width: 150px;
			height: 150px;
			top:-80px;
			left:130px;
			border-radius: 180px;
		}

		.shadow {
			position: absolute;
			bottom:-10px;
			width:320px;
			/*height:0px;实现云效果的关键是没有高度*/
			-webkit-border-radius: 50%;
	-webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);			background: #000;
			z-index: -1;
		}
		</style>
	</head>
	<body>
		<div id="cloud"><span class="shadow"></span></div>
	</body>
</html>